import React from 'react';
import classnames from 'classnames';
import { history } from 'umi'
import styles from './style.less';

const Rank = ({ data = [], query = {} }) => {
    const handleClick = firstLevelDepartmentId => () => {
        history.push({
            pathname: '/stat/workStat/workOverview/department/overview',
            query: { ...query, departmentId: firstLevelDepartmentId }
        });
    };

    return (
        <div className={styles.wrap}>
            {data.map(({ title = '', firstLevelDepartmentId = 0, num = 0 }, index) => (
                <div className={styles.box} key={title} onClick={handleClick(firstLevelDepartmentId)}>
                    <div className={classnames(styles.rank, { [styles.better]: index < 3 })}>{index + 1}</div>
                    <div className={styles.title} title={title}>
                        {title}
                    </div>
                    <div className={styles.num}>{`(${num} 小时)`}</div>
                </div>
            ))}
        </div>
    );
};

export default Rank;
